import React from 'react';
import clsx from 'clsx';

export interface PageProps {
  className?: string;
  headerClassName?: string;
  contentClassName?: string;
  title?: string;
  children: React.ReactNode;
  fullWidth?: boolean;
}

function WrapperNoMemoized(props: PageProps) {
  const { className, headerClassName, contentClassName, title, children, fullWidth } = props;
  return (
    <div
      className={clsx(
        'flex flex-col min-h-screen h-full py-5 m-auto',
        fullWidth ? 'w-full' : 'max-w-4xl',
        className
      )}
    >
      {title && (
        <h1
          className={clsx(
            'flex-none text-xl font-bold text-purple-800 dark:text-purple-50 px-5 py-2.5 bg-base-200 sticky top-0 z-50',
            headerClassName
          )}
        >
          {title}
        </h1>
      )}
      <div className={clsx('flex-auto w-full px-5 pt-2.5 rounded-lg', contentClassName)}>
        {children}
      </div>
    </div>
  );
}

export const Wrapper = React.memo(WrapperNoMemoized);
